<template>
    <div id="tmpl">
        <!-- 1.0轮播图： mint-ui中的swipe组件实现-->
        <mt-swipe :auto="4000">
            <!--<mt-swipe-item>1</mt-swipe-item>-->
            <mt-swipe-item v-for="item in list.slice(0,3)">
                <img :src="item.url">
            </mt-swipe-item>
        </mt-swipe>

        <!-- 2.0利用MUI的9宫格样式实现导航区域 -->
        <div class="mui-content">
            <ul class="mui-table-view mui-grid-view mui-grid-9">
                <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><router-link to="/news/newslist">
                    <span class="mui-icon test-icon-news"></span>
                    <div class="mui-media-body">新闻资讯</div>
                </router-link</li>
                <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><router-link to="/photo/photolist">
                    <span class="mui-icon test-icon-img"></span>
                    <div class="mui-media-body">图片分享</div>
                </router-link></li>
                <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><router-link to="/goods/goodslist">
                    <span class="mui-icon test-icon-buy"></span>
                    <div class="mui-media-body">商品购买</div>
                </router-link></li>
                <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><router-link to="/talk">
                    <span class="mui-icon test-icon-talk"></span>
                    <div class="mui-media-body">留言反馈</div>
                </router-link></li>
                <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><router-link to="/video">
                    <span class="mui-icon test-icon-video"></span>
                    <div class="mui-media-body">视频专区</div>
                </router-link></li>
                <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><router-link to="/aboutus">
                    <span class="mui-icon test-icon-call"></span>
                    <div class="mui-media-body">联系我们</div>
                </router-link></li>
            </ul>
        </div>

    </div>
</template>


<script>
    import {Toast} from 'mint-ui';

    export default {
        data() {
            return {
                list: []
            }
        },
        created() {
            //当页面中的data和methods对象创建完毕以后，就会自动调用created
            this.getimg();
        },
        methods: {
            getimg() {
                //实现轮播组件中的数据请求
                //1.0 确定url
                var url = 'https://www.apiopen.top/meituApi?page=1';

                //2.0 调用$http.get()
                this.$http.get(url).then(function (response) {
                    var data = response.body;
                    //错误处理
                    if (data.code != 200) {
                        Toast(data.msg);
                        return;
                    }
                    // 如果服务器返回的数据正常则赋值给list
                    this.list = data.data;
                });
            }
        }
    }
</script>


<style scoped>
    .mint-swipe {
        height: 300px;
    }

    .mint-swipe-item {
        background: red;
        width: 100%;
        height: 300px;
    }

    .mint-swipe-item img {
        width: 100%;
    }

    .mui-content, .mui-content ul{
        background-color: #fff;
    }
    .mui-grid-view.mui-grid-9 .mui-table-view-cell,.mui-grid-view.mui-grid-9{
        border: 0px;
    }

    .test-icon-news:before,
    .test-icon-img:before,
    .test-icon-buy:before,
    .test-icon-talk:before,
    .test-icon-video:before,
    .test-icon-call:before{
        content: '';
        display: inline-block;
        width: 50px;
        height: 50px;
        background-size: cover;
    }
    .test-icon-news:before{
        background-image: url("../../static/imgs/n01.png");
    }
    .test-icon-img:before{
        background-image: url("../../static/imgs/n02.png");
    }
    .test-icon-buy:before{
        background-image: url("../../static/imgs/n03.png");
    }
    .test-icon-talk:before{
        background-image: url("../../static/imgs/n04.png");
    }
    .test-icon-video:before{
        background-image: url("../../static/imgs/n05.png");
    }
    .test-icon-call:before{
        background-image: url("../../static/imgs/n06.png");
    }
</style>